<template>
    <div class="box-view flex center">

        <!-- 计算属性测试 -->
        <div>{{ testStr }}</div>

        <!-- 插槽 -->
        <div class="flex">
            <slot name="header" :data="tcText"></slot>
        </div>

        <!-- 内容 -->
        <div class="flex row center">
            <div class="vv-btn vv-reduce flex center" :class="`btn-size-${option.size}`" 
                @click="onClick('reduce')">-</div>

            <slot :data="tcText" :unit="unit">
                <div class="vv-content flex center">
                    <!-- {{ texts }} -->
                    {{ textsGS }}
                </div>
            </slot>

            <div class="vv-btn vv-plus flex center" :class="`btn-size-${option.size}`" 
                @click="onClick('plus')">+</div>
        </div>

        <div class="vv-set-com" @click="onSetTextUnit">设置为(20瓶)</div>
        <div class="vv-test" @click="onTest">测试按钮</div>

        <!-- 插槽 -->
        <div class="flex">
            <slot name="footer"></slot>
        </div>

    </div>
</template>
<script>
    import props from './props/props';

    export default {
        // 接收参数
        props,

        // 计算属性
        computed: {

            /**
             * 给 tcText 加上自定义单位
             */
            texts: function () {
                return `${this.tcText} ${this.unit}`;
            },

            /**
             * 计算属性的 getter setter
             */
            textsGS: {
                get: function () {
                    return `${this.tcText} ${this.tcUnit || this.unit}`;
                },
                set: function (val) {
                    let {
                        num = 0,
                        unit = '',
                    } = { ...val }

                    this.tcText = num;
                    this.tcUnit = unit;
                },
            },

            /**
             * 计算属性简单事例
             */
            testStr: function () {
                return this.testList.map(m => m.name).join('--');
            },
        },

        // 侦听器
        watch: {

            /**
             * text === tcText
             * 双向绑定
             */
            text: {
                handler (val) {
                    this.tcText = val;
                },
                immediate: true
            },

            /**
             * text === tcText
             * 双向绑定
             * 单向数据流，进行双向绑定
             */
            tcText: {
                handler (val) {
                    this.$emit('update:text', val);
                    
                    // 方式一：双向绑定
                    this.$emit('update:formatText', val + this.unit);
                    // 方式二：回调
                    this.$emit('formatText', val + this.unit)
                },
                immediate: true
            },

            /**
             * 配置项监听，演示使用
             */
            option: {
                handler (val) {
                    
                },
                // 深度监听，可以监听对象
                deep: true,
                // immediate 的作用是：控制侦听器是否自动触发一次！
                immediate: true
            }
        },

        // 响应式数据
        data () {
            return {
                tcText: 0,
                tcUnit: '',
            }
        },

        // 方法
        methods: {

            /**
             * 点击事件监听
             * @param {*} tagger 
             */
            onClick (tagger = 'plus') {
                
                // 事件预处理
                if(tagger === 'plus'){
                    this.tcText += 1;
                }else if(tagger === 'reduce'){
                    this.tcText -= 1;
                }

                // 发送事件
                this.$emit(tagger);
            },

            /**
             * 设置计算属性的值
             */
            onSetTextUnit () {
                this.textsGS = { num: 20, unit: '瓶' };
            },

            /**
             * 测试按钮
             */
            onTest () {
                // console.log(this.textsGS);
                // console.log(this.textsGS);
                // console.log(this.textsGS);
                // console.log(this.textsGS);
                console.log(this.textsGS);


            },
        }
    }
</script>

<style scoped>
    .box-view {
        width: 600px;
        height: 300px;
        border: 1px solid #EFEFEF;
        border-radius: 10px;
    }
    .vv-btn {
        width: 80px;
        height: 80px;
        background-color: #409EFF;
        font-size: 36px;
        color: #FFF;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
    }
    .vv-btn:hover {
        background-color: #3D95F1;
    }
    .vv-btn:active {
        background-color: #3787DA;
    }

    .vv-plus {
        font-size: 30px;
    }
    .vv-content {
        width: 150px;
        height: 80px;
        font-size: 36px;
        color: #121212;
        font-weight: bold;
    }
    .vv-reduce {
        font-size: 36px;
    }
    .btn-size-small {
        width: 50px;
        height: 50px;

    }
    .btn-size-big {
        width: 80px;
        height: 80px;
    }
    .vv-set-com {
        margin-top: 30px;
        font-size: 16px;
        color: #409EFF;
        cursor: pointer;
        box-sizing: border-box;
    }
    .vv-set-com:hover {
        text-decoration: underline;
    }
    .vv-test {
        font-size: 16px;
        color: #409EFF;
        cursor: pointer;
        box-sizing: border-box;
    }
    .vv-test:hover {
        text-decoration: underline;
    }
</style>